<template>
  <div class="shopcart-container">
    <!-- 收货地址区域 -->
    <van-cell style="font-size: 18px" title="收货地址" is-link :to="{ name: 'addressList', params: { addressId: address.id } }">
      <template #label>
        <van-row class="address">姓名：{{ address.name }}</van-row>
        <van-row class="address">电话：{{ address.tel }}</van-row>
        <van-row class="address">地址：{{ address.city + address.county + address.address_detail }}</van-row>
      </template>
    </van-cell>

    <!-- 商品列表 -->
    <van-card v-for="(item,i) in goodsList" :key="i"
              :num="item.count"
              :price="item.price"
              :title="item.name"
              :desc="item.title"
              :thumb="APIDomainName + item.pic" />

    <!-- 配送信息 -->
    <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />

    <!-- 运费信息 -->
    <van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
    <van-cell title="运费" :value="`¥0.00`" />
    <van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />

    <!-- 创建订单按钮 -->
    <van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
  </div>
</template>

<script>
import { createOrderAPI } from '@/api/order.js';
import { getDefaultAddressAPI } from '@/api/address.js';
import { getCartListCheckedAPI } from '@/api/cart.js';
export default {
  data() {
    return {
      goodsList: [],
      remark: '',
      // amount: 0,
      address: {}
    };
  },

  created() {
    if (this.$route.params.addressId) {
      //通过路由名 addressList 转来的
      this.address.id = this.$route.params.addressId;
    }

    this.initDefaultAddress(); //初始默认收货地址

    this.loadDataList(); //初始订单商品（购物车勾选商品）
  },
  computed:{
    amount(){
      let amount = 0;

      this.goodsList.forEach(item => {
        amount += item.count * item.price;
      });
      return amount
    }
  },

  methods: {
    //初始订单商品（购物车勾选商品）
    loadDataList() {
      getCartListCheckedAPI().then(result => {
        console.log(result)
        this.goodsList = result.data;
      });
    },

    //初始默认收货地址
    initDefaultAddress() {
      getDefaultAddressAPI(this.address.id).then(result => {
        if (result.data.length == 1) {
          this.address = result.data[0];
        } else {
          //如果没有默认收货地址，提示后导航到地址列表页面（该页面还未实现）
          this.$toast('请先添加收货地址');
          setTimeout(()=>{
            this.$router.replace({
              name: 'addressList',
              params: { addressId: 9999999999 }
            });
          },2000)
        }
      });
    },

    //处理创建订单
    OnClickCreateOrder() {
      let productList = [];
      this.goodsList.forEach(item =>
          productList.push({
            product_id: item.product_id,
            count: item.count,
            price: item.price
          })
      );

      //根据接口文档，准备接口参数
      let params = {
        address_id: this.address.id,
        productList: productList,
        remark: this.remark
      };

      createOrderAPI(params).then(result => {
        this.$toast(result.msg);
        //创建成功后导航到订单列表页面（该页面还未实现）
        this.$router.push({ name: 'orderList' });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.shopcart-container {
  display: flex;
  flex-direction: column;
  background: #eee;
  overflow: hidden;
  // 收货地址
  .address-container {
    background-color: #f5f5f5;
    margin: 0;
    padding: 10px;
  }
}

.van-card__title {
  font-size: 15px;
}
.address{
  font-size: 16px;
}
</style>
